<template>
	<div class="topic_main">
		<el-form :model="form" :rules="rules" ref='theForm' :inline='true'>
			<el-row>
				<el-col :span='12'>
					<el-form-item label="题型：" prop="questionType">
						<div class="topic_mainit clearfix">
							<div class="topic_questionType" :class="form.questionType == item.value?'active':''" @click="selectQuesType(item.value)" v-for="item in questionTypes">
								<div class="topic_questionlabel">
									<img src="@/assets/images/topic_questionlabel.png" />
								</div>
								{{item.name}}
							</div>
						</div>
						<el-input v-show='false' v-model='form.questionType'></el-input>
					</el-form-item>
				</el-col>
				<el-col :span='12'>
					<el-form-item label="难度：" prop="difficulty">
						<div class="topic_mainit clearfix">
							<div class="topic_questionType" :class="form.difficulty == item.value?'active':''" @click="selectDifficulty(item.value)" v-for="item in difficultys">
								<div class="topic_questionlabel">
									<img src="@/assets/images/topic_questionlabel.png" />
								</div>
								{{item.name}}
							</div>
						</div>
						<el-input v-show='false' v-model='form.difficulty'></el-input>
					</el-form-item>
				</el-col>
			</el-row>
		</el-form>
		<tsingle :form='form' :getScore='getScore' ref='inputmain' v-if="form.questionType == 'SINGLE'"></tsingle>
		<tmultiple :form='form' :getScore='getScore' ref='inputmain' v-if="form.questionType == 'MULTIPLE'"></tmultiple>
		<tjudge :form='form' :getScore='getScore' ref='inputmain' v-if="form.questionType == 'JUDGE'"></tjudge>
	</div>
</template>

<script>
	import tsingle from "./components/tsingle"
	import tmultiple from "./components/tmultiple"
	import tjudge from "./components/tjudge"
	export default {
		components: {
			tsingle,
			tmultiple,
			tjudge,
		},
		props: {
			form: {
				type: Object,
				required: true,
				default: () => ({})
			},
			getScore: {
				type: Boolean,
				required: false,
				default: false
			},
		},
		data() {
			return {
				labelwidth: '110px',
				questionTypes: [{
					name: '单选题',
					value: 'SINGLE'
				}, {
					name: '多选题',
					value: 'MULTIPLE'
				}, {
					name: '判断题',
					value: 'JUDGE'
				}],
				difficultys: [{
					name: '简单',
					value: 'SIMPLE'
				}, {
					name: '中等',
					value: 'MEDIUM'
				}, {
					name: '困难',
					value: 'DIFFICULTY'
				}],
				rules: {
					questionType: [{
						required: true,
						message: '请选择题型'
					}],
					difficulty: [{
						required: true,
						message: '请选择题目难度'
					}],
				},
			}
		},
		created() {},
		methods: {
			selectQuesType(questionType) {
				if(this.form.questionType == questionType) {
					return
				}
				this.form.questionType = '';
				this.form.question = '';
				this.form.options = '';
				this.form.optionsArr = [];
				this.form.answer = '';
				this.form.answers = [];
				this.form.analysis = '';
				this.$nextTick(() => {
					this.form.questionType = questionType
				})
			},
			topicChange() {
				this.questionType = '';
				var form = {
					majorId: this.form.majorId,
					questionUse: this.form.questionUse,
					difficulty: this.form.difficulty,
					questionType: this.form.questionType,
					question: '',
					questionArr: ['', '', '', ''],
					list: [],
					options: '',
					optionsArr: ['', '', '', ''],
					answer: '',
					answers: [],
					analysis: '',
				};
				this.$set(this, 'form', form);
				this.$nextTick(() => {
					this.questionType = this.form.questionType;
				})
			},
			selectDifficulty(difficulty) {
				this.form.difficulty = difficulty
			},
			clearCheck() {
				this.$refs.theForm.clearValidate();
			},
			beforeCheck() {
				return new Promise((resolve, reject) => {
					this.$refs.theForm.validate(valid => {
						if(!valid) {
							reject();
						} else {
							this.$refs.inputmain.beforeSubmit().then((data) => {
								var returnData = Object.assign({}, data, {
									difficulty: this.form.difficulty,
									questionType: this.form.questionType,
								})
								resolve(returnData);
							}).catch(() => {
								reject();
							})
						}
					});
				});
			}
		}
	}
</script>